<template>
	<view class="loginPage">
		<view class="bg"></view>
		<view class="navbar">
			<view class="register"><u-icon name="arrow-left"></u-icon></view>
			<view v-if="type=='login'" class="register" @click="changeType('register')"> 注册 </view>
			<view v-else class="register" @click="changeType('login')"> 登录 </view>
		</view>
		<view class="welcome">
			您好!</br>
			欢迎使用智慧华创
		</view>
		<view class="login-form" v-if="type=='login'">
			<u--form labelPosition="top" labelWidth="auto" :model="loginForm" :rules="rules" ref="uForm">
				<u-form-item label="手机号" prop="phone" borderBottom >
					<u--input v-model="loginForm.phone" border="none" placeholder="输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="密码" labelWidth="auto" prop="password" borderBottom >
					<u--input v-model="loginForm.password" border="none" placeholder="输入密码" clearable :password="!eyeOpen">
						<template slot="suffix">
							<view class="" @click="eyeOpen = !eyeOpen">
								<img src="@/static/img/icon-eye-open.png" v-if="eyeOpen" alt="" style="width: 24px;height: 24px;" />
								<img src="@/static/img/icon-eye-close.png" v-else alt="" style="width: 24px;height: 24px;" />		
							</view>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
			<view class="forgot-password" @click="forgotPassword">
				忘记密码
			</view>
			<u-button type="primary" style="margin-top: 10px;height: 44px;" text="登录" @click="userLogin"></u-button>
		</view>
		<view class="login-form" v-else>
			<u--form labelPosition="top" labelWidth="auto" :model="loginForm" :rules="rules" ref="uForm">
				<u-form-item label="手机号" prop="phone" borderBottom >
					<u--input v-model="loginForm.phone" border="none" placeholder="输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" borderBottom >
					<u--input v-model="loginForm.code" border="none" placeholder="输入验证码">
						<template slot="suffix">
							<view class="" style="color: #3D7CFD;">
								获取验证码
							</view>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="密码" labelWidth="auto" prop="password" borderBottom >
					<u--input v-model="loginForm.password" border="none" placeholder="输入密码" clearable :password="!eyeOpen">
						<template slot="suffix">
							<view class="" @click="eyeOpen = !eyeOpen">
								<img src="@/static/img/icon-eye-open.png" v-if="eyeOpen" alt="" style="width: 24px;height: 24px;" />
								<img src="@/static/img/icon-eye-close.png" v-else alt="" style="width: 24px;height: 24px;" />		
							</view>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
			<u-button type="primary" style="margin-top: 10px;height: 44px;" text="登录" @click="userLogin"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				eyeOpen:false,
				type:'login',
				loginForm:{
					phone: '19912345678', //手机号码
					password: 'a12345678', //密码
				},
				rules: {
					'phone': [
						{
							type: 'string',
							required: true,
							message: '输入正确的手机号格式',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '输入正确的手机号格式',
							trigger: ['change','blur'],
						}
					],
					'code': [
						{
							type: 'string',
							required: true,
							message: '输入6位验证码',
							trigger: ['blur', 'change'],
						},
						{
							min: 6,
							max: 6,
							message: '输入6位验证码',
							trigger: ['blur', 'change'],
						},
					],
					'password': [
						{
							type: 'string',
							required: true,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							min: 8,
							max: 20,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return  /[a-zA-Z]/.test(value) && /[0-9]/.test(value);
							},
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						}
					],
				},
			};
		},
		methods: {
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			changeType(type){
				this.type = type
			},
			forgotPassword(){
				uni.navigateTo({
					url:'/pages/login/forgotPassword'
				})
			},
			//当前登录按钮操作
			userLogin() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
				//手机号密码登录
				// this.$Api.common.userLogin({
				// 	phone: this.phone,
				// 	password: this.password,
				// }).then(res => {
				// 	//提交用户信息到VueX
				// 	this.$store.commit('LOGIN', {
				// 		token: res.data.token
				// 	})
				// })
			}
		},
	}
</script>
<style scoped lang="scss">
	view{
		box-sizing: border-box;
	}
	.loginPage {
		position: relative;
		height: 100vh;
		overflow: auto;
		padding: 22px;
		padding-top: 44px;
		font-family: zktqkt, zktqkt;
	}
	.bg {
		width: 272px;
		height: 257px;
		background: linear-gradient( 25deg, rgba(10,185,184,0.07) 0%, rgba(255,255,255,0) 100%);
		border-radius: 50%;
		position: fixed;
		top: -92px;
		right: -66px;
	}
	.navbar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
		padding-left: 8px;
		
		.register {
			height: 44px;
			font-size: 14px;
			color: #3D7CFD;
			padding: 14px;
		}
	}
	.welcome {
		font-family: zktqkt, zktqkt;
		font-weight: 400;
		font-size: 26px;
		color: #00113D;
		line-height: 38px;
	}
	.login-form {
		margin-top: 39px;
	}
	.forgot-password {
		font-weight: 400;
		font-size: 16px;
		color: #3D7CFD;
		line-height: 42px;
	}
	::v-deep .u-form-item {
		position: relative;
		.u-form-item__body__left {
			margin-bottom: 10px !important;
		}
		
		.u-form-item__body__right__message {
			position: absolute;
			top: 0;
			right: 0;
			line-height: 42px;
			color: #FD714D;
		}
		.u-form-item__body__right__message::after {
			content: '';
			background-image: url('../../static/img/icon-warning.png');
			width: 12px;
			height: 12px;
			background-size: 100% 100%;
			position: absolute;
			left: -16px;
			top: 50%;
			transform: translateY(-50%);
		}
		
		.u-line {
			margin: 0 !important;
		}
		
		.u-form-item__body__right__message + .u-line {
			border-bottom: 1px solid #FD714D !important;
		}
	}

</style>